<template>
  <el-container>
    <el-header>
      <el-menu router :default-active="activeIndex" mode="horizontal">
        <el-breadcrumb style="margin: 20px" separator="/">
          <el-breadcrumb-item>{{ parent_menu_name }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ menu_name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="width: 20px" />
        <el-sub-menu v-for="menu in all_menus" :key="menu.name" :index="menu.name">
          <template #title>{{ menu.header }}</template>
          <el-menu-item v-for="submenu in menu.children" :key="submenu.name" :index="submenu.name">
            {{ submenu.header }}
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-header>
    <el-main class="main">
      <RouterView />
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import router from './router'
const parent_menu_name = ref<string>()
const menu_name = ref<string>()
const activeIndex = ref()
const all_menus: any[] = router.options.routes
  .filter((r) => r.meta?.ismenu)
  .map((r) => {
    return {
      name: r.name,
      header: r.meta?.header,
      children: r.children
        ?.filter((s) => s.meta?.ismenu)
        .map((s) => {
          return { name: s.name, header: s.meta?.header }
        })
    }
  })
watch(
  () => router.currentRoute.value.name,
  (n) => {
    activeIndex.value = n
    parent_menu_name.value = router.currentRoute.value.matched[0].meta.header as string
    menu_name.value = router.currentRoute.value.meta.header as string
  }
)
</script>
<style>
html,
body,
#app,
.el-container {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}
.main {
  padding: 10 10 10 10;
}
.mobile-frame {
  width: 320px;
  height: 480px;
  margin: 0 auto;
  margin-top: 30px;
  background-color: #f2f3f5;
}
.van-nav-bar .van-nav-bar__content {
  height: 54px;
  background-color: #011f3c;
}
</style>
